import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {
  Form,
  Tooltip,
  Radio,
  Input,
  Button,
  Icon,
  Alert,
  Row,
  Col,
  InputNumber
} from 'antd';
import noop from 'util/noop'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const layoutProps = {
  labelCol: { 
    span: 6 
  },
  wrapperCol: { 
    span: 18 
  }
}
@Relax
export default class BasicSetup extends Component{
  static defaultProps = {
    afterSaleState: 0,
    afterSaleLimit: 0,
    afterSaleContent: '',
    onBasicSetting: noop,
    onSave: noop
  }
  render() {
    let {afterSaleState, afterSaleLimit, afterSaleContent, onBasicSetting, onSave} = this.props;
    return (
      <Form>
        <FormItem label="退货退款服务状态" {...layoutProps} required>
          <RadioGroup  value={afterSaleState} onChange={this.onSetting}>
            <Radio name="afterSaleState" value={1}>开启</Radio>
            <Radio name="afterSaleState" value={0}>关闭</Radio>
          </RadioGroup>
          <Tooltip placement="bottom" title={"开启后您的用户可以在会员中心提交退货申请"}>
            <span className="help-tips">
              <Icon type="info-circle"/>
            </span>
          </Tooltip>
        </FormItem>
        <FormItem label="退货时间限制" {...layoutProps} required>
          <span>订单收货超过</span> 
          <InputNumber 
            min={1} 
            style={{width:'60px',margin:'0 3px'}} 
            onChange={(v)=>onBasicSetting({afterSaleLimit: v})}
            value={afterSaleLimit}/> 天后，不能进行退货申请(默认7天)
        </FormItem>
        <FormItem label="退货说明" {...layoutProps} required help="您还可以输入500字"> 
          <div style={{width:'500px'}}>
          <Alert message={"设置后，将会在用户申请退货页面中展示"} type="info"/>
          <Input 
            type="textarea" 
            rows="6" 
            cols="6" 
            className="h100" 
            name="afterSaleContent" 
            onChange={this.onSetting}
            value={afterSaleContent}/>
          </div>
        </FormItem>
        <Row>
          <Col span="6"></Col>
          <Col span="18">
            <Button type="primary" onClick={onSave}>保存</Button>
          </Col>
        </Row>
      </Form>
    )
  }
  onSetting = (e) => {
    let {name, value} = e.target;
    let {onBasicSetting} = this.props;
    onBasicSetting({[name]: value})
  }
} 